<template>
  <el-dialog
    :title="!this.dataForm.orUuid ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="充值的账号" prop="orNumber">
        <el-input v-model="dataForm.orNumber" placeholder="充值的账号"></el-input>
      </el-form-item>
      <el-form-item label="用户名称" prop="orName">
        <el-input disabled v-model="dataForm.orName" placeholder="用户名称"></el-input>
      </el-form-item>
      <el-form-item label="下单时间" prop="orCreateTime">
        <el-input
          disabled
          v-model="dataForm.orCreateTime"
          placeholder="下单时间"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品名称" prop="orSpName">
        <el-input v-model="dataForm.orSpName" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="下单数量" prop="orCount">
        <el-input-number v-model="dataForm.orCount" :min="1" :max="10"></el-input-number>
        <!--    <el-input v-model="dataForm.orCount" placeholder="下单数量"></el-input> -->
      </el-form-item>
      <el-form-item label="支付价格" prop="orPlayPrice">
        <el-input-number v-model="dataForm.orPlayPrice" :min="1"></el-input-number>
        <!--      <el-input v-model="dataForm.orPlayPrice" placeholder="支付价格"></el-input> -->
      </el-form-item>
      <el-form-item label="支付时间" prop="orPlayTime">
        <el-input
          disabled
          v-model="dataForm.orPlayTime"
          placeholder="支付时间"
        ></el-input>
      </el-form-item>
      <el-form-item label="支付状态" prop="orStatus">
        <el-select v-model="dataForm.orStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!--      <el-input v-model="dataForm.orStatus" placeholder="支付状态"></el-input> -->
      </el-form-item>
      <el-form-item label="手机号" prop="orPhone">
        <el-input v-model="dataForm.orPhone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="orUrId">
        <el-input disabled v-model="userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="支付类型" prop="orType">
        <el-select v-model="dataForm.orType" placeholder="请选择">
          <el-option
            v-for="item in pays"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <el-input v-model="dataForm.orType" placeholder="支付类型"></el-input> -->
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import api from "@/api/modules/cbborder";
export default {
  data() {
    return {
      userName: "",
      pays: [
        {
          value: "支付宝", //0未支付,1进行中，2已完成，-1支付取消
          label: "支付宝",
        },
        {
          value: "微信", //0未支付,1进行中，2已完成，-1支付取消
          label: "微信",
        },
      ],
      options: [
        {
          value: 0, //0未支付,1进行中，2已完成，-1支付取消
          label: "未支付",
        },
        {
          value: 1, //0未支付,1进行中，2已完成，-1支付取消
          label: "进行中",
        },
        {
          value: 2, //0未支付,1进行中，2已完成，-1支付取消
          label: "已完成",
        },
        {
          value: -1, //0未支付,1进行中，2已完成，-1支付取消
          label: "支付取消",
        },
      ],
      visible: false,
      dataForm: {
        orUuid: 0,
        orNumber: "",
        orName: "",
        orCreateTime: "",
        orSpName: "",
        orCount: "",
        orPlayPrice: "",
        orPlayTime: "",
        orStatus: "",
        orPhone: "",
        orStId: "",
        orUrId: "",
        orType: "",
      },
      dataRule: {
        orNumber: [{ required: true, message: "充值的账号不能为空", trigger: "blur" }],
        orName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }],
        orCreateTime: [{ required: true, message: "下单时间不能为空", trigger: "blur" }],
        orSpName: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
        orCount: [{ required: true, message: "下单数量不能为空", trigger: "blur" }],
        orPlayPrice: [{ required: true, message: "支付价格不能为空", trigger: "blur" }],
        orPlayTime: [{ required: true, message: "支付时间不能为空", trigger: "blur" }],
        orStatus: [
          {
            required: true,
            message: "支付状态（0未支付,1进行中，2已完成，-1支付取消）不能为空",
            trigger: "blur",
          },
        ],
        orPhone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
        orStId: [{ required: true, message: "商品id不能为空", trigger: "blur" }],
        orUrId: [{ required: true, message: "用户id不能为空", trigger: "blur" }],
        orType: [{ required: true, message: "支付类型不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    init(id) {
      this.dataForm.orUuid = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        api.info(this.dataForm.orUuid).then(({ data }) => {
          if (data) {
            this.dataForm.orNumber = data.cbbOrder.orNumber;
            this.dataForm.orName = data.cbbOrder.orName;
            this.dataForm.orCreateTime = data.cbbOrder.orCreateTime;
            this.dataForm.orSpName = data.cbbOrder.orSpName;
            this.dataForm.orCount = data.cbbOrder.orCount;
            this.dataForm.orPlayPrice = data.cbbOrder.orPlayPrice;
            this.dataForm.orPlayTime = data.cbbOrder.orPlayTime;
            this.dataForm.orStatus = data.cbbOrder.orStatus;
            this.dataForm.orPhone = data.cbbOrder.orPhone;
            this.dataForm.orStId = data.cbbOrder.orStId;
            this.dataForm.orUrId = data.cbbOrder.orUrId;
            this.dataForm.orType = data.cbbOrder.orType;
            this.userName = data.cbbOrder.user.urUsername;
          }
        });
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          var parms = {
            orUuid: this.dataForm.orUuid || undefined,
            orNumber: this.dataForm.orNumber,
            orName: this.dataForm.orName,
            orCreateTime: this.dataForm.orCreateTime,
            orSpName: this.dataForm.orSpName,
            orCount: this.dataForm.orCount,
            orPlayPrice: this.dataForm.orPlayPrice,
            orPlayTime: this.dataForm.orPlayTime,
            orStatus: this.dataForm.orStatus,
            orPhone: this.dataForm.orPhone,
            orStId: this.dataForm.orStId,
            orUrId: this.dataForm.orUrId,
            orType: this.dataForm.orType,
          };
          api.updateAdd(parms, this.dataForm.orUuid).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
